<template>
    <div class="detail-container">

      <el-card shadow="never" style="margin-top: 15px">    
          
        <div class="operate-container">
          <div class="operate-button-container">
            <el-button size="mini" @click="handleReturn">返回</el-button>
          </div>
        </div>

        <div style="margin-top: 20px">
          <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
          <span class="font-small">基本信息</span>
        </div>
        
        <div class="table-layout">
          <el-row>
            <el-col :span="6" class="table-cell-title">银行业务受理号</el-col>
            <el-col :span="6" class="table-cell">{{slxxFormData.ywslh}}</el-col>
            <el-col :span="6" class="table-cell-title">咨询电话</el-col>
            <el-col :span="6" class="table-cell">{{slxxFormData.zxdh}}</el-col>
          </el-row>

          <el-row>
            <el-col :span="6" class="table-cell-title">区县代码</el-col>
            <el-col :span="6" class="table-cell">{{slxxFormData.qxdm}}</el-col>
            <el-col :span="6" class="table-cell-title">登记类型</el-col>
            <el-col :span="6" class="table-cell">{{slxxFormData.djlx}}</el-col>
          </el-row>

          <el-row>
            <el-col :span="6" class="table-cell-title">受理人</el-col>
            <el-col :span="6" class="table-cell">{{slxxFormData.slr}}</el-col>
            <el-col :span="6" class="table-cell-title">受理时间</el-col>
            <el-col :span="6" class="table-cell">{{slxxFormData.slsj}}</el-col>
          </el-row>

          <el-row>
            <el-col :span="6" class="table-cell-title">短信联系人</el-col>
            <el-col :span="6" class="table-cell">{{slxxFormData.dxlxr}}</el-col>
            <el-col :span="6" class="table-cell-title">短信联系电话</el-col>
            <el-col :span="6" class="table-cell">{{slxxFormData.dxlxdh}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="6" class="table-cell-title">提单人</el-col>
            <el-col :span="6" class="table-cell">{{slxxFormData.tdr}}</el-col>
            <el-col :span="6" class="table-cell-title">提单时间</el-col>
            <el-col :span="6" class="table-cell">{{slxxFormData.tdsj}}</el-col>
          </el-row>


        </div>

          <el-form :model="slxxFormData" label-width="150px" ref="slxxForm" :size="size">
            
          </el-form>
      </el-card>
    </div>
</template>

<script>
// 受理信息
const defaultSlxxFormData = {
  ywslh: '',
  qxdm: '',
  djlx: '',
  slr: '',
  slsj: '',
  zxdh: '',
  dxlxr: '',
  dxlxdh: '',
  tdr: '',
  tdsj: ''
}

const defaultDyqrxxFormData = [{
  ywslh: '',
  frdh: '',
  frmc: '',
  frzjlx: '',
  frzjh: '',
  dlrdh: '',
  dlrzjh: '',
  dlrmc: '',
  dlrzjlx: '',
  dyqrmc: '',
  qlrzjlx: '',
  qlrdh: '',
  qlrzjh: '',
  qlrmc: '',
  txdz: ''
}]

const defaultDyrxxFormData = [{
  ywslh: '',
  qlrmc: '',
  zjlx: '',
  zjhm: '',
  xb: '',
  dwxz: '',
  gj: '',
  gyqk: '',
  bdcqzh: '',
  dlrmc: '',
  dlrdh: '',
  dlrzjh: '',
  qlbl: ''
}]


      
export default {
    name: 'DyBusinessDetail',
    components: {},
    data() {
        return {
          
          size: 'small',

          // 表单数据
          slxxFormData: Object.assign({}, defaultSlxxFormData),
          dyqrxxFormData: Object.assign({}, defaultDyqrxxFormData),
          dyrxxFormData: Object.assign({}, defaultDyrxxFormData),


          viewDetailDataFormRules: {
            shyj: [
              { required: true, message: '请填写审核意见', trigger: 'blur' }
            ]
          }
      
        };
    },
    computed: {},
    watch: {},
    methods: {
      // 返回
      handleReturn() {
        this.$router.go(-1)
      }

      
      
    },
    created() {
      let ns = this
      ns.$api.dyywsl.viewBusiness(ns.$route.query.ywslh).then((res) => {
				if(res.code == 200) {
					ns.$message({ message: '查看业务详情成功', type: 'success' })
					ns.slxxFormData = res.data.slxx
				} else {
					ns.$message({message: '查看业务详情失败, ' + res.msg, type: 'error'})
				}
      })
      
    },
    mounted() {},
    beforeCreate() {},
    beforeMount() {},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {},
    activated() {},
    }
</script>
<style lang='scss' scoped>
  .detail-container {
    width: 80%;
    padding: 20px 20px 20px 20px;
    margin: 20px auto;
  }

  .operate-container {
    background: #F2F6FC;
    height: 80px;
    margin: -20px -20px 0;
    line-height: 80px;
  }

  .operate-button-container {
    float: right;
    margin-right: 20px
  }

  .table-layout {
    margin-top: 20px;
    border-left: 1px solid #DCDFE6;
    border-top: 1px solid #DCDFE6;
  }

  .table-cell {
    height: 60px;
    line-height: 40px;
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    font-size: 14px;
    color: #606266;
    text-align: center;
    overflow: hidden;
  }

  .table-cell-title {
    height: 60px;
    line-height: 40px;
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    background: #F2F6FC;
    text-align: center;
    font-size: 14px;
    color: #303133;
  }
</style>